<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实验4制作web页面广告</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }


        #part1 {
            width: 1000px;
            height: 500px;
            background-color: #aa00ff;
            border: #666666 1px solid;
            margin: 0 auto;
        }

        #part2 {
            width: 1000px;
            height: 500px;
            background-color: #00aaff;
            border: #666666 1px solid;
            margin: 0 auto;
        }

        #part3 {
            width: 1000px;
            height: 500px;
            background-color: #55ff7f;
            border: #666666 1px solid;
            margin: 0 auto;
        }

        /*对联广告样式*/
        #ad1,
        #ad2 {
            position: fixed;
            top: 50px;
            width: 200px;
            height: 400px;
            background-image: url(./img/2.jpg);
        }

        #ad1 {
            left: 0;
        }

        /*靠左*/
        #ad2 {
            right: 0;
        }

        /*靠右*/
        /*弹窗广告样式*/
        #ad3 {
            position: fixed;
            bottom: -250px;
            /* 将广告隐藏在页面下方 */
            right: 0px;
            height: 250px;
            width: 300px;
            background-image: url(./img/3.jpg);
            transition: transform 0.5s ease-in-out;
            /* 添加transition属性 */
            z-index: 1000;

        }

        /*关闭按钮图片样式*/
        #close,
        #close1 {
            width: 50px;
            height: 15px;
            object-fit: cover;
            position: absolute;
            bottom: 0;
            right: 0;
            background-image: url(img/cha.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
        }

        #close3 {
            width: 50px;
            height: 15px;
            object-fit: cover;
            position: absolute;
            top: 0;
            right: 0;
            background-image: url(img/cha.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center center;
        }
    </style>
</head>

<body>
    <div id="part1"></div>
    <div id=ad1>
        <div id="close"></div>
    </div>
    <div id="part2"></div>
    <div id=ad2>
        <div id="close1"></div>
    </div>
    <div id="part3"></div>
    <div id="ad3" style="display:none;">
        <div id="close3"></div>
    </div>
</body>
<script>
    var close = document.querySelector("#close");
    var close1 = document.querySelector("#close1");
    var close3 = document.querySelector("#close3");
    var ad1 = document.getElementById('ad1');
    var ad2 = document.getElementById('ad2');
    //关闭左边
    close.onclick = function () {
        ad1.style.display = "none";
    }
    //关闭右边
    close1.onclick = function () {
        ad2.style.display = "none";
    }
    //关闭弹窗广告
    close3.onclick = function () {
        var ad3 = document.getElementById('ad3');
        ad3.style.display = "none";
    }
    //添加一个事件监听器，以在页面加载后显示弹窗广告
    window.addEventListener('load', function () {
        var ad3 = document.getElementById('ad3');
        ad3.style.display = "block";
    });

    // 1.5s弹出弹窗广告
    window.onload = function () {
        var ad3 = document.getElementById('ad3');
        setTimeout(function () {
            ad3.style.transform = "translateY(-250px)"; // 将广告向上移动
        }, 1500);



    }

</script>

</html>